<template>
  
  <div class="aside" >
    
    <el-menu
      class="menu"
     :collapse="isCollapse"  
      background-color="#324157"
      text-color="#fff"
      active-text-color="#40e1ffdb"
      :default-active="onActive"
      :unique-opened=false
      router
    >
      <template v-for="item1 in arr">
          <!-- 判断是否有二级菜单，因为如果有二级菜单的话，那么就要用 el-sbumenu 标签 -->
        <template v-if="item1.next">

            <!-- 如果有的话，则先渲染一级菜单 -->
          <el-submenu :key="item1.id"  :index="item1.title" >
            <template>
              <template slot="title">
                <i :class="item1.icon1"></i>
                <span slot="title">{{ $t(`i18n.${item1.first}`) }}</span>
              </template>
                <!-- 开始渲染二级菜单 -->
                <template v-for="item2 in item1.next">
                    <!-- 渲染之前，仍要判断三级菜单是否存在 -->
                  <template v-if="item2.next">
                        <!-- 三级菜单存在，先渲染二级菜单，用el-submenu  -->
                        <el-submenu :index="item2.title" :key="item2.id">
                            <template>
                                <template slot="title" >{{$t(`i18n.${item2.second}`)}}</template>
                            </template>
                                <!-- 渲染三级菜单 -->
                             <template v-for="item3 in item2.next">
                                    <el-menu-item :index="item3.title" :key="item3.id" >
                                    {{$t(`i18n.${item3.third}`)}}
                                    </el-menu-item>
                            </template>
                        </el-submenu>
                  </template>
                    <!-- 如果三级菜单不存在，则渲染二级菜单 -->
                  <template v-else>
                      <el-menu-item :index="item2.title" :key="item2.id">
                       {{$t(`i18n.${item2.second}`)}}
                      </el-menu-item>
                  </template>
                </template>
          
            </template>
          </el-submenu>
        </template>

        <!-- 如果没有二级菜单，则直接渲染一级菜单 -->
        <template v-else>
          <el-menu-item :key="item1.id" :index="item1.title">
            <i :class="item1.icon1"></i>
            <span slot="title">
                {{ $t(`i18n.${item1.first}`) }}
            </span>
           
          </el-menu-item>
        </template>
      </template>
      
    </el-menu>
        
  </div>
</template>
<script>
export default {
  beforeCreate() {
      // 不折叠
      this.$bus.$on('aside-open',()=>{
        this.isCollapse=false
      })
       // 折叠
       this.$bus.$on('aside-close',()=>{
        this.isCollapse=true
      })
  },
 
  data() {
    return {
      isCollapse: true,
     arr: [
        {
          first: "Menu3_1",
          id: '0',
          icon1: "el-icon-s-tools",
          title: "3-menu1",
        },
        {
          first: "Menu3_2",
          id: '3',
          icon1: "el-icon-goods",
          title: "3-menu2",
        },
      ],
      
    };
  },
  computed:{
     onActive(){
        return  this.$route.path.replace('/','')
    }
  }
   
};
</script>

<style scoped>
.aside{
    position: absolute;
    z-index: -1;
    top: 80px;
    left: 3px;
    bottom: 0;

    /* 显示y轴上的滚动条 */
    overflow-y: scroll;
    /*  不让选中文字 */
    user-select: none;
}
/* 设置滚动条的样式，将其隐藏，它是个伪类选择器 */
.aside::-webkit-scrollbar{
  width: 0;
}
/* menu这个类 是指不含el-menu--collapse这个类的时候起作用,也就是没有折叠的时候，宽度是250px*/
.menu:not(.el-menu--collapse){
  width: 250px;
}

.el-menu{
  border: 0;
 
}

</style>